<!--
 * @Descripttion: 
 * @version: 
 * @Author: 淏
 * @Date: 2023-12-03 18:56:48
 * @LastEditors: 淏
 * @LastEditTime: 2023-12-11 13:58:06
-->
<template>
  <div>
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="35vh"
      width="30vw"
    ></Echart>
  </div>
</template>

<script>
  import Echart from '@/components/echarts/echart/index.vue'

  export default {
    // 组件名称
    name: 'lineEchart',
    // 组件参数 接收来自父组件的数据
    props: {
      cdata: {
        type: Object,
        default: () => ({}),
      },
    },
    // 局部注册的组件
    components: {
      Echart,
    },
    // 组件状态值
    data() {
      return {
        options: {},
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {
      cdata: {
        handler(newData) {
          this.options = {
            tooltip: {
              trigger: 'axis',
              backgroundColor: 'rgba(255,255,255,0.3)',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true,
                  backgroundColor: '#7B7DDC',
                },
              },
              textStyle: {
                color: '#00ffff',
              },
            },
            legend: {
              data: ['数据新增', '数据碰撞'],
              textStyle: {
                color: '#B4B4B4',
              },
              top: '0%',
            },
            grid: {
              x: '2%',
              width: '85%',
              y: '4%',
            },
            xAxis: {
              data: newData.category,
              axisLine: {
                lineStyle: {
                  color: '#B4B4B4',
                },
              },
              axisTick: {
                show: false,
              },
            },
            yAxis: [
              {
                splitLine: { show: false },
                axisLine: {
                  lineStyle: {
                    color: '#B4B4B4',
                  },
                },

                axisLabel: {
                  formatter: '{value}次 ',
                },
              },
              {
                splitLine: { show: false },
                axisLine: {
                  lineStyle: {
                    color: '#B4B4B4',
                  },
                },
                axisLabel: {
                  formatter: '{value} 次',
                },
              },
            ],
            series: [
              {
                name: '数据新增',
                type: 'line',
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 8,
                yAxisIndex: 1,
                itemStyle: {
                  normal: {
                    color: '#F02FC2',
                  },
                },
                data: newData.lineData,
              },
              {
                name: '数据碰撞',
                type: 'line',
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 8,
                yAxisIndex: 1,
                itemStyle: {
                  normal: {
                    color: '#956FD4',
                  },
                },
                data: newData.barData,
              },
            ],
          }
        },
        immediate: true,
        deep: true,
      },
    },
    // 组件方法
    methods: {},
    created() {},
    mounted() {},
  }
</script>

<style scoped></style>
